import * as echarts from 'echarts'
import { onMounted, onUnmounted, watch, nextTick } from 'vue'
import { observeResize } from '../compNew/useObserveResize'

// 定义不同线段的颜色
const colors = ['#8000E3', '#FFA500', '#00FF00', '#0000FF']

// 定义tooltip与鼠标的偏移量
const TOOLTIP_OFFSET_X = 15
const TOOLTIP_OFFSET_Y = 15

const Comp = (props: any) => {
  const { id, data, colorKey, key, yname, hideRightTick = false, handleClick } = props
  let myChart: echarts.ECharts | null = null
  
  // 初始化图表
  const initChart = () => {
    // 确保容器元素存在
    const chartDom = document.getElementById(id)
    if (!chartDom) return
    
    // 销毁旧实例
    if (myChart) {
      myChart.dispose()
    }
    
    // 初始化新实例
    myChart = echarts.init(chartDom)
    
    const _data = data[key]
    if (!_data) return
    
    // 动态计算grid.left值，确保左侧有足够空间显示长数字
    const maxValueLength = Math.max(..._data.yaxisList.flatMap((item) => item.data)).toString().length
    const gridLeft = Math.max(40, maxValueLength * 10) // 每位数约占10px宽度

    const option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#283b56',
          },
        },
        zIndex: 9999, // 提高tooltip层级
        // 自定义tooltip位置，确保不超出图表元素并与鼠标保持距离
        position: function (point, params, dom, rect, size) {
          const chartDom = document.getElementById(id)
          if (!chartDom) return point

          // 获取图表容器的位置和尺寸
          const chartRect = chartDom.getBoundingClientRect()

          // 计算tooltip初始位置（加上偏移量）
          let x = point[0] + TOOLTIP_OFFSET_X
          let y = point[1] + TOOLTIP_OFFSET_Y

          // 计算tooltip在图表内的可用空间
          const availableRight = chartRect.width - x
          const availableBottom = chartRect.height - y

          // 根据可用空间决定tooltip的位置
          // 水平方向调整
          if (availableRight < size.contentSize[0]) {
            // 右侧空间不足，向左移动
            x = Math.max(0, point[0] - size.contentSize[0] - TOOLTIP_OFFSET_X)
          }

          // 垂直方向调整
          if (availableBottom < size.contentSize[1]) {
            // 下方空间不足，向上移动
            y = Math.max(0, point[1] - size.contentSize[1] - TOOLTIP_OFFSET_Y)
          }

          return [x, y]
        },
      },
      grid: {
        left: gridLeft,
        top: 46,
        bottom: 25,
        right: 20,
      },
      legend: {
        show: true,
        textStyle: {
          color: '#ffffff',
          fontSize: 10,
        },
        right: 0,
        top: 0,
        data: _data.yaxisList.map((item) => item.name),
      },
      toolbox: {
        show: false, // 隐藏右上角提示标签
      },
      xAxis: [
        {
          type: 'category',
          axisLabel: {
            color: 'rgba(255,255,255,0.70)',
            fontSize: 10,
            interval: function (index, value) {
              // 计算应该显示哪些标签，只显示4个均匀分布的标签
              const dataLength = _data.xaxisList.length
              const step = Math.max(1, Math.floor(dataLength / 3)) // 分成3个间隔
              return index % step === 0 || index === dataLength - 1
            },
            rotate: 0, // 水平显示
            // 简化日期格式，只显示月/日
            formatter: function (value) {
              return value.substring(5).replace(/-/g, '/') // 从YYYY-MM-DD提取MM-DD并转为MM/DD
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.12)',
            },
          },
          data: _data.xaxisList,
        },
      ],
      yAxis: [
        {
          type: 'value',
          scale: true,
          name: yname,
          axisLabel: {
            show: hideRightTick ? false : true,
            color: 'rgba(255,255,255,0.70)',
            // 格式化y轴标签，将大数字转换为W(万)单位
            formatter: function (value) {
              if (value >= 10000) {
                return (value / 10000).toFixed(1) + 'w' // 转换为W单位
              } else if (value >= 1000) {
                return (value / 1000).toFixed(1) + 'k' // 千位数显示为"千"
              }
              return value.toString()
            },
          },
          nameTextStyle: {
            color: 'rgba(255,255,255,0.70)',
            fontSize: 10,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.12)',
            },
          },
          // 固定Y轴显示4个刻度
          splitNumber: 4,
        },
      ],
      series: _data.yaxisList.map((item: any, index: any) => {
        return {
          name: item.name,
          type: 'line',
          data: item.data,
          smooth: true,
          areaStyle: {
            color: `rgba(${parseInt(colors[index].substring(1, 3), 16)}, ${parseInt(colors[index].substring(3, 5), 16)}, ${parseInt(colors[index].substring(5, 7), 16)}, 0.6)`,
          },
          lineStyle: {
            color: colors[index],
          },
        }
      }),
    }
    
    // 设置图表选项
    myChart.setOption(option)
    myChart.on('click', 'series.line', function(params) {
      console.log(params)
      handleClick(params)
    })
    // 首次渲染时强制触发一次重绘
    nextTick(() => {
      if (myChart) {
        myChart.resize()
      }
    })
  }
  
  // 监听容器尺寸变化
  const setupResizeListener = () => {
    if (!myChart) return
    
    observeResize('.board-container', () => {
      if (myChart) {
        myChart.resize({
          animation: {
            duration: 300,
            easing: 'quadraticIn',
          },
        })
      }
    })
  }
  
  // 组件挂载后初始化图表
  onMounted(() => {
    // 等待DOM渲染完成后初始化
    nextTick(() => {
      initChart()
      setupResizeListener()
    })
  })
  
  // 监听数据变化，更新图表
  watch(() => data[key], () => {
    initChart()
  })
  
  // 组件卸载时销毁图表
  onUnmounted(() => {
    if (myChart) {
      myChart.dispose()
      myChart = null
    }
  })
  
  // 为了兼容Vue组件规范，返回一个对象
  return {}
}

export default Comp